<script setup lang="ts">
const config = useRuntimeConfig()

const card = [
  {
    src: config.app.baseURL + 'image/ziyoudayin.svg',
    name: '精选'
  },
  {
    src: config.app.baseURL + 'image/anquangaoxiao.svg',
    name: '方便'
  },
  {
    src: config.app.baseURL + 'image/fangbiankuaijie.svg',
    name: '提效'
  }
]

</script>
<template>
  <div class="background relative overflow-hidden">
    <h1 class="text-center text-5xl font-bold pt-20 pb-4">
      让AI离日常更进一步
    </h1>
    <div class="text-center text-gray-400 text-2xl pt-4">
      集成一些好用的AI工具，可以直接进入使用
    </div>

    <div class="flex items-center gap-4 justify-center h-[400px]">
      <!-- 卡片 -->
      <div v-for="(item, index) in card" :key="index" class="w-[320px] rounded-xl bg-white shadow-md py-4 select-none hover:-translate-y-1 duration-300">
        <img class="w-[90px] mx-auto" :src="item.src" alt="">
        <div class="text-center pt-3">
          {{ item.name }}
        </div>
      </div>
    </div>

    <!-- 装饰 -->
    <div class="animate-tl max-2xl:-z-10 w-[160px] h-[160px] rounded-2xl bg-[#F0F6FF] -top-20 left-60 absolute" />
    <div class="animate-bl max-2xl:-z-10 w-[200px] h-[200px] rounded-2xl bg-[#B9D6FF] -bottom-20 left-20 absolute" />
    <div class="animate-tr max-2xl:-z-10 w-[200px] h-[200px] background-2 -top-10 right-20 absolute rotate-12" />
    <div class="animate-br max-2xl:-z-10 w-[200px] h-[200px] rounded-full bg-[#F7E5F0] -bottom-20 right-20 absolute rotate-12" />
  </div>
</template>

<style scoped>
.background {
  background: linear-gradient(99deg,#cee8ff,#cee8ff 0,rgba(234,241,242,0) 49%,#ffeaea 98%,#ffeaea 0),linear-gradient(180deg,#eff7ff,#eff7ff 0,rgba(255,239,239,0) 100%,rgba(255,239,239,0) 0),#f0f6ff;
}
.background-2 {
  background-image: url();
  background-size: 100% 100%;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(-15%) translateX(-5%) rotate(15deg);
    }
    50% {
        transform: rotate(10deg);
    }
}
.animate-tl {
    animation: bounce 5s infinite;
}
.animate-bl {
    animation: bounce 5s infinite alternate-reverse;
}
.animate-tr {
    animation: bounce 5s infinite reverse;
}
.animate-br {
    animation: bounce 5s infinite alternate;
}
</style>
